<template>
  <div class="login">
    <!--顶部 banner-->
    <top-bar></top-bar>

    <div class="login-tabs-container">
      <!--标签页-->
      <tabs @tabSwitch="tabSwitch" :tabsNames="tabsNames" :componentNames="componentNames"></tabs>
      <div class="login-tabs-bg">
        <!--登录组件-->
          <component v-bind:is="compIs" keep-alive>
            <div class="login-help">
              <router-link to="/register" replace class="new-user">新用户注册</router-link>
              <router-link to="/retrievepwd" v-if="compIs !== 'verifyLogin'" class="forget-password">忘记密码？</router-link>  <!--使用验证码方式登录时不显示忘记密码选项-->
            </div>
          </component>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/topBar/topBar";  // 顶部条
import normalLogin from "@/components/loginBar/normalLogin";  // 登录条  用户名密码登录
import verifyLogin from "@/components/loginBar/verifyLogin";  // 登录条  验证码登录
import tabs from "@/components/tabs/tabs";  // 标签页

// 登录界面
export default {
  name: "login",
  data() {
    return {
      // 当前要显示的组件
      compIs: 'normalLogin',
      // 标签页的名字 对应组件的名字
      tabsNames: ['账号登录', '验证码登录'],
      // 组件的名字
      componentNames: ['normalLogin', 'verifyLogin']
    }
  },
  methods: {
    // 点击标签页切换对应的组件
    tabSwitch(compName) {
      this.compIs = compName
    }
  },
  components: {
    topBar,
    normalLogin,
    verifyLogin,
    tabs,
  }
};
</script>

<style lang="scss" scoped>
  .login {
    height: 100%;
    background-color: white;
  }
  .login-tabs-container {
    margin-top: -80px;
    .login-tabs-bg {
      width: 100%;
      box-sizing: border-box;
      background-color: white;
      padding-top: 32px;
      margin-top: 20px;
      border-radius: 12px 12px 0 0;

      /deep/ .loginBar {
        /*margin-top: 50px;*/
        padding: 0 20px;
        z-index: 1;
        .login-help {
          padding-top: 10px;
          font-size: 14px;
          .new-user {
            color: #135ad6;
            float: left;
            text-align: left;
          }
          .forget-password {
            color: #5c697b;
            float: right;
            text-align: right;
          }
        }
      }
    }

    /deep/ .tabs {
      padding: 0 20px;
      z-index: 1;
    }
  }
</style>
<style>
  .van-button--large {
    border-radius: 4px;
    font-weight: 700;
  }
</style>
